<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>管理员登录</title>
    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/weuix.css"/>
    <link rel="icon" href="favicon.png"> <link rel="icon" href="favicon.ico">
        <script src="/js/zepto.min.js"></script>
        <script src="/js/jquery-1.9.1.js"></script>

        <style>
        .login_buttom {
            margin-top: 30px;
            margin-bottom: 20px;
            width: 86%;
            background-color: #027aff;
        }



        body {
            background: url("/img/loginpage_bg.png")  no-repeat;
            background-size:cover;

        }

        .main {
            box-sizing: border-box;
            padding-top: 14px;
            position: relative;
            top: 288px;
            background-color: #fff;
            width: 82%;
            border-radius: 4px;
            margin: 0 auto;
        }

        .main input {
            display: block;
            padding: 12px;
            border-radius: 8px;
            width: 86%;
            margin: 0 auto;
            margin-top: 10px;
            box-sizing: border-box;
            background-color: #f8f9fa;
            height: 58px;
       
          
        }

        .border {
            border: solid 1px #027aff !important;
        }



        .weui-icon_msg {

            font-size: 34px;
            text-align: center;
            /*padding-left: 50%;*/
            margin: 0 0 0 18px;
            box-sizing: border-box;
            position: fixed;
            z-index: 3333;
        }

        .flex1 {
            margin-top: 310px;
            margin-left: 40px;
            flex: 1;
            vertical-align: text-top;
        }

        .flex2 {
            overflow: hidden;
            margin-top: 310px;
            /*margin-left: 60px;*/
            line-height: 30px;
            /*text-align: left;*/
            /*float: left;*/
            /*margin-left: 20px;*/
            flex: 4;

        }

        .weui-msg__title {

            margin-bottom: 5px;
            /*margin-left: 36px;*/
            font-weight: 400;
            font-size: 16px;
            word-wrap: break-word;
            word-break: break-all;
        }








        </style>

</head>
<body>


<form id="loginForm" method="post" action="/mengwen/admin/login">


    <div class="main">
        <div class="weui-flex">
            <div class="weui-flex__item"><div class="placeholder">
                <div class="weui-cell__bd">
                    <label for="account_number"></label><input name="account_number" class="weui-input" id="account_number" placeholder="账号" type="text" maxlength="11">
                </div>
            </div></div>
        </div>
        <div class="weui-flex">
            <div class="weui-flex__item"><div class="placeholder">
                <div class="weui-cell__bd">
                    <label for="password"></label><input name="password" class="weui-input" id="password" placeholder="密码" type="password" maxlength="20">
                </div>
            </div></div>
        </div>
        <div class="weui-flex">
            <div class="weui-flex__item"><div class="placeholder">
                <div class="weui-cell__bd">
                    <a href="javascript:;"  id="submit" class="weui-btn bg-blue login_buttom">登&nbsp;录</a>
                </div>
            </div></div>
        </div>

    </div>

</form>

    <input type="hidden" id="msg" th:value="${errorMsg}">




<div class="weui-flex" id="error_icon" style="display: none">
    <div class="weui-flex__item flex1"><div class="weui-msg__icon-area"><i class="weui-icon-warn  weui-icon_msg"></i></div>
    </div>
    <div class="weui-flex__item flex2"><div class="weui-msg__text-area">
        <h2 class="weui-msg__title" id="error_msg" style="color: #fff">发送失败， 发送内容不能为空</h2>
    </div></div>
</div>
    
    <script>
            $("input").click(
                function () {
                    $(this).addClass("border");
                }
            );

            $("input").blur(
                function () {
                    $(this).removeClass("border");
                }
            );

            $("#submit").click(
                function(){
                    // 表单校验：
                    if ($("#account_number").val() == "" || $("#password").val() == "") {
                        $("#error_icon").show();
                        $("#error_msg").html("表单项不能为空")
                        setTimeout(function(){$("#error_icon").hide()}, 3500);
                        return
                    }else {
                        $("#loginForm").submit();
                    }


                }

                // function (e) {
                //     var account_number = $("#account_number").val();
                //     var password = $("#password").val();
                //     $.ajax({
                //         type: 'POST',
                //         url: '/mengwen/partner/login',
                //         data: {
                //             "account_number":account_number,
                //             "password":password
                //         },
                //         dataType: JSON,
                //         success:function () {
                //             alert("成功了")
                //             window.location = "/login";
                //         }
                //
                //     });
                // }


            );

            let val = $("#msg").val();
            if(val != "" || val.length != 0) {
                $("#error_icon").show();
                $("#error_msg").html("账号或密码错误！")
                setTimeout(function(){$("#error_icon").hide()}, 3500);
            }
 
         </script>
   
    
</body>
</html>